
*{margin: 0;padding: 0;box-sizing: border-box;}
*::before,*::after{box-sizing: border-box}


@keyframes circle{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}


.page{
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: transparent url(http://p3.music.126.net/dCwwR-XlUfkmQkvam8ygCw==/18302470556468817.jpg) no-repeat center;
  background-size: cover;
}

.disc-container{
  position: relative;
}
.disc-container .icon-wrapper{
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  height: 20vw;
  width: 20vw;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
}
.disc-container .icon{
  width: 10vw;
  fill: #fff;
}
.disc-container .disc{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18vw;
}
.disc-container .pointer{
  width: 24vw;
  position: absolute;
  left: 45vw;
  z-index: 1;
}
.disc-container .ring{
  width: 72vw;
}
.disc-container .light{
  width: 72vw;
  position: absolute;
  animation: circle 20s infinite linear;
  animation-play-state: paused;
}
.disc-container .cover{
  position: absolute;
  width: 44vw;
  border-radius: 50%;
  animation: circle 20s infinite linear;
  animation-play-state: paused;
}
.disc-container.playing .cover,
.disc-container.playing .light{
  animation-play-state: running;
}
.disc-container .icon-pause{
  display: none;
}
.disc-container.playing .icon-pause{
  display: block;
}
.disc-container.playing .icon-play{
  display: none;
}

.song-description{
  flex-grow: 1;
  color: #AEABAC;
  text-align: center;
  line-height: 2;
  margin-top: 20px;
}
.song-description h1{
  color: white;
  font-size: 18px;
}
.song-description p{
  font-size: 14px;
  line-height: 24px;
}
.song-description .lines{
  transition: transform 0.3s;
}
.song-description .lines p.active{
  color: #2cd89f;
  font-size: 1em;
}
.song-description .lyric{
  height: 72px;
  overflow: hidden;
}


.page>.links{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #d43b32;
}
.page>.links>a{
  width: 38.5vw;
  margin: 1em;
  text-align: center;
  border: 1px solid #d43b32;
  background: transparent;
  padding: 1.5vw;
  color: inherit;
  text-decoration: none;
  border-radius: 1.3vw;
  letter-spacing: 1vw;
}
.page>.links>a.main{
  background: #d43b32;
  color: white;
}